<%@ page import="com.dingpeikeji.quickdeer.core.modules.orders.entity.TOrders" contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<%@include file="/WEB-INF/views/include/constrant.jsp" %>
<c:if test="${orders.ordertype ne ORDER_TYPE_REALSCHE_SELF_TRAVEL}" >
	<c:set var="title" value="车辆" />
</c:if>
<c:if test="${orders.ordertype eq ORDER_TYPE_REALSCHE_SELF_TRAVEL}" >
	<c:set var="title" value="座位" />
</c:if>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>支付方式</title>
<link rel="stylesheet" href="${ctxStatic }/index/css/popup.css" />
<%@ include file="/WEB-INF/views/layouts/head.jsp" %>
		<script>
			$(function(){
				$('#cancel').click(function(){
					if(confirm('你确定要取消此订单吗?')){
						$('#cancelForm').submit();
					}
				})
				var pay=true;
             $('.pay_exp').click(function(){         
                if(pay){
                	   	$('.pay_cicon').css('transform',' rotateZ(-45deg)');
                	   	$('.pay_hj').slideDown('fast');
                	   	pay=false;
                }else{
                	    $('.pay_cicon').css('transform',' rotateZ(135deg)');
                	    $('.pay_hj').slideUp('fast');
                	    pay=true;
                }
             })
                pay!=pay;
                
                $('.pay_btn').click(function(){
                	$('#open_pay').fadeIn();
                })
			})
		</script>
	</head>
	<body>
	<form id="cancelForm" action="${ctxFront}/pay/cancel" method="get" >
	<input type="hidden" name="orderid" value="${orders.orderid }"/>
<input type="hidden" name="ordertype" value="${orders.ordertype }"/>
	</form>
	<form id="payForm" action="${ctxFront}/pay/pay" method="get" target="_blank">
<input type="hidden" name="orderid" value="${orders.orderid }"/>
<input type="hidden" name="ordertype" value="${orders.ordertype }"/>
		<div id="pay_page">
			 <div class="pay_list">
			 	 <div class="payli_box">
			 	 	<div class="pay_txts" style="text-align: center;width: 100%;">
			 	 		<c:if test="${empty minutes }">
					订单支付超时，请重新预定！
				</c:if>
				<c:if test="${not empty minutes }">
					${title }已锁定，请在规定时间内进行支付，完成网上包车，支付剩余时间<span  id="leftTimeShow">${sessionScope.minutes }分${sessionScope.seconds }秒</span>
					<script type="text/javascript">
						// 锁定倒计时
						var minutes = ${sessionScope.minutes};
						var seconds = ${sessionScope.seconds};
						var se = window.setInterval("leftTimeShow()",1000);
						function leftTimeShow(){
							$('#leftTimeShow').text(minutes+'分'+seconds+'秒');
							seconds--;
							if(seconds <= 0) {
								minutes--;
								seconds = 59;
							}
							 if(minutes < 0) {
								clearInterval(se);
							} 
						}
					</script>
				</c:if>
			 	 	</div>
			 	 </div>
			 	 <div class="payli_box">
			 	 	<div class="pay_moeny">
			 	 		<span>订单金额：</span>
			 	 		<b>￥${orders.dueamount }</b>
			 	 	</div>
			 	 	<div class="pay_txts">
			 	 		<p class="pay_product">
			 	 			<b>包车产品：</b>
			 	 			<b>${orders.ordername }</b>
			 	 		</p>
			 	 		<p class="pay_hj">
			 	 			<span>
			 	 				<b>上车地点：</b>
			 	 				<b>${orders.boardaddr }</b>
			 	 			</span>
			 	 			<span>
			 	 				<b>用车时间：</b>
			 	 				<b><fmt:formatDate value="${orders.departdate }" pattern="yyyy-MM-dd HH:mm:ss"/></b>
			 	 			</span>
			 	 		</p>
			 	 		<p class="pay_hj">
			 	 			<span>
			 	 				<b>用车辆数：</b>
			 	 				<b>${orders.purchasenum }</b>
			 	 			</span>
			 	 			<span>
			 	 				<b>乘车人：</b>
			 	 				<b>${orders.contacts }</b>
			 	 			</span>
			 	 		</p>		 	 		
			 	 	</div>
			 	 	<a href="#" class="pay_exp">
			 	 		<span>订单详情</span>
			 	 		<i class="pay_cicon"></i>
			 	 	</a>
			 	 </div>
			     <div class="go_pay">
			     	  <p>
			     	  	<b>需支付：</b>
			     	  	<b>￥${orders.dueamount }</b>
			     	  </p>
			     	  <p class="gopay_i">
			     	  	<b>支付方式：</b>
			     	  	<label>
			     	  		<input type="radio" name="payway" checked="checked" value="${TORDERS_PAY_WAY_ALIPAY }"/>
			     	  		<font>支付宝支付</font>
			     	  	</label>
			     	  	<label>
			     	  		<input type="radio" name="payway" value="${TORDERS_PAY_WAY_WXPAY }"/>
			     	  		<font>微信支付</font>
			     	  	</label>
			     	  	<div class="pay-cel-btn">
			     	  	     <a href="javascript:void(0)" class="pay_btn" id="ClickMe" onclick="$('#payForm').submit();">支付</a>
			     	  	     <a href="javascript:void(0)" class="c_cel" id="cancel" >取消</a>
			     	  	</div>
			     	  </p>
			     </div>
			 </div>
		</div>
		</form>
		 <div id="open_pay">
		 	   <div class="paym_pop">
		 	   	     <div class="pay_overs">
		 	   	     	<a href="${ctxFront}/orders/orderList">支付完成</a>
		 	   	     </div>
		 	   	     <div class="pay_prol">
		 	   	     	<a href="${ctxFront}/orders/orderList">遇到问题</a>
		 	   	     </div>
		 	   </div>
		 </div>
	</body>
	<%@ include file="/WEB-INF/views/layouts/foot.jsp" %>
</html>
